<template>
	<div style="margin:20px auto 0;display: flex;justify-content: space-around;">
		<Tabs :tabs="tabsList" width="250" height="32" @childEvent="changeTabsone"/>
	</div>
	<div class="iconfont_row">
		<div class="iconfont_item" :title="iconfont.iconClass" v-for="(iconfont,index) in iconList" :key="index" @click="copyClassName(iconfont.iconClass)">
			<Icon :name="iconfont.iconClass" />
			{{iconfont.name}}
		</div>
	</div>
</template>

<script setup>
	import {iconfonts,colorfonts} from '../../assets/iconfont/iconList'
	import { ElMessage } from 'element-plus'
	import {
		reactive,
		ref
	} from 'vue'
	const iconfontsList = reactive(iconfonts)
	const colorfontsList = reactive(colorfonts)
	const iconList =ref([])
	iconList.value =iconfontsList
	const copyClassName = (className)=>{
		navigator.clipboard.writeText(className);
		ElMessage({
		    message: '已复制到剪贴板！',
		    type: 'success',
		  })
	}
	
	const changeTabsone = (index)=>{
		if(index==0){
			iconList.value =iconfontsList
		}else if(index==1){
			iconList.value =colorfontsList
		}
		
	}
	
	const tabsList=[
		{name:"空心"},
		{name:"实心"},
		{name:"彩色"},
	]
</script>

<style scoped>
	.iconfont_row i.iconfont {
		font-size: 20px;
	}

	.iconfont_row {
		display: flex;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
		/* padding: 20px; */
		box-sizing: border-box;
	}

	.iconfont_item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 9%;
		padding-top: 16px;
		padding-bottom: 16px;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		margin-right: -1px;
		margin-bottom: -1px;
		box-sizing: border-box;
		border-top: 1px solid #ddd;
		border-left: 1px solid #ddd;
		color: #888;
		background: #fff;
		font-size: 13px;
		cursor: pointer;
	}

	.iconfont_item i {
		margin-bottom: 10px;

	}
</style>